// 库引入
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';
import {Icon, message} from 'antd';
import copy from 'clipboard-copy';

// 样式引入
import styles from './detailsItem.module.less';

@observer
class DetailsItem extends Component {
  handleCopyButtonClick = (str) => {
    if (!str) 
      return;
    var flag = copy(str);
    if (flag) {
      message.success('复制成功');
    } else {
      message.warning('复制失败');
    }
  }
  render() {
    return (
      <li
        className={classNames(styles.detailsItem, this.props.className)}
        style={this.props.style}>
        <h3 className={styles.title}>版本：{this.props.version}</h3>
        <ul className={styles.list}>
          {this
            .props
            .files
            .map(item => {
              item = `https://cdn.bootcss.com/${this.props.name}/${this.props.version}/${item}`;
              return (
                <li className={styles.item} key={item}>
                  <span className={styles.url}><Icon className={styles.icon} type="lock"/>{item}</span>
                  <div className={styles.copy}>
                    <span
                      className={styles.copyButton}
                      onClick={() => {
                      this.handleCopyButtonClick(`<link href="${item}" rel="stylesheet">`);
                    }}>复制标签</span>
                    <span
                      className={styles.copyButton}
                      onClick={() => {
                      this.handleCopyButtonClick(item);
                    }}>复制链接</span>
                  </div>
                </li>
              );
            })}
        </ul>
      </li>
    );
  }
}

DetailsItem.defaultProps = {
  name: '',
  version: '4.1.1',
  files: []
};

const InjectDetailsItem = inject(({
  someStore = {}
}) => ({someProps: someStore.attribute}))(DetailsItem);

export {DetailsItem, InjectDetailsItem};